<template>
  <div class="wave-pic-box">
    <BigimgView
      @choiceevent="choiceEvent"
      @switchevent="switchEvent"
      @hidechevent="hideEvent"
      v-if="bigShow"
      :plist="plist"
      :index="index"
      :bigShow="bigShow"
      :currentPic="currentPic"
      :childWidth="childWidth"
      :childHeight="childHeight"
      :leftState="leftState"
      :rightState="rightState"
    ></BigimgView>
    <div class="wave-pic-list">
      <div
        class="wave-pic-item"
        v-for="(item, i) in Picdata"
        :key="i"
        @click="imgBig(i, item.pic)"
      >
        <div class="wave-pic-datail" v-if="item.islong === false">
          <img
            :src="item.pic"
            alt=""
            ref="picbox"
            class="image-box"
          />
        </div>
        <div class="wave-pic-datail" v-else>
          <img
            :src="item.pic"
            alt=""
            ref="picbox"

          />
          <div class="pic_cover">
            <span>长图</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BigimgView from './bigimgView.vue'
export default {
  components: {
    BigimgView
  },
  props: {
    // 接受到的图片数据
    Picdata: Array
  },
  data () {
    return {
      widthText: '', // 动态宽度
      heightText: '', // 动态高度
      plist: [], // 放大图片数据
      bigShow: false, // 显示图片放大组件
      index: null, // 点击的图片下标
      currentPic: '', // 点击的图片路径
      childWidth: '', // 传递子组件显示图片的宽
      childHeight: '', // 传递子组件显示图片的高
      leftState: false,
      rightState: false
    }
  },
  mounted () {
    // console.log(this.Picdata)
  },
  computed: {
    // picList () {
    //   const newlist = []
    //   this.Picdata.forEach((item) => {
    //     const picObj = {}
    //     // console.log('islong', item.islong)
    //     if (item.width >= item.height) {
    //       picObj.pic = item.pic
    //       picObj.islong = false
    //       picObj.width = (item.width / item.height) * 100 + '%'
    //       picObj.left = (-(item.width / item.height - 1) / 2) * 100 + '%'
    //       picObj.height = '100%'
    //       newlist.push(picObj)
    //     } else {
    //       if (item.islong) {
    //         picObj.pic = item.pic
    //         picObj.islong = true
    //         picObj.width = '100%'
    //         picObj.height = (item.height / item.width) * 100 + '%'
    //         newlist.push(picObj)
    //       } else {
    //         picObj.pic = item.pic
    //         picObj.islong = false
    //         picObj.width = '100%'
    //         picObj.height = (item.height / item.width) * 100 + '%'
    //         picObj.top = (-(item.height / item.width - 1) / 2) * 100 + '%'
    //         newlist.push(picObj)
    //       }
    //     }
    //   })
    //   return newlist
    // }
  },
  methods: {
    // 点击放大图片
    imgBig (i, url) {
      console.log(i)
      this.plist = this.Picdata // 全部的图片数据
      this.currentPic = url // 被点击的图片路径
      this.bigShow = true // 显示放大图片组件
      this.index = i // 显示点击组件的下标
      const w = this.Picdata[i].width // 放大图片的宽度
      const h = this.Picdata[i].height // 放大图片的高度
      if (w > h) {
        this.childHeight = '100%'
      } else if (h > w) {
        this.childHeight = '100%'
      } else {
        this.childHeight = '100%'
      }
      this.checkState(i) // 调用判断切换按钮
    },
    // 选项切换图片子传父
    choiceEvent (data) {
      // console.log('子组件传递给父组件的数据', data)
      this.currentPic = data.url
      this.index = data.childI // 当前下标
      this.checkState(data.childI) // 调用判断切换按钮
    },
    // 判断点击了左或者右边
    switchEvent (data) {
      if (data.val === 'left') {
        console.log('left', data.childI)
        this.currentPic = this.Picdata[data.childI - 1].pic
        this.index = data.childI - 1
        this.checkState(data.childI - 1)
      } else if (data.val === 'right') {
        console.log('right', data.childI)
        this.currentPic = this.Picdata[data.childI + 1].pic
        this.index = data.childI + 1
        this.checkState(data.childI + 1)
      }
    },
    // 隐藏组件
    hideEvent () {
      this.bigShow = false
    },
    // 判断左右切换按钮显示
    checkState (i) {
      const length = this.Picdata.length
      if (i === 0 && length === 1) {
        this.leftState = false
        this.rightState = false
      } else if (i === 0 && length > 1) {
        this.leftState = false
        this.rightState = true
      } else if (i > 0 && i < length - 1) {
        this.leftState = true
        this.rightState = true
      } else if (i === length - 1 && length > 1) {
        this.leftState = true
        this.rightState = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@use "@/styles/init.scss" as h;
.wave-pic-box {
  width: auto;
  .wave-pic-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .wave-pic-item {
      width: 132px;
      height: 132px;
      margin-left: 4px;
      margin-top: 4px;
      overflow: hidden;
      display: inline-block;
      position: relative;
      .wave-pic-datail {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        overflow: hidden;
        display: block;
        position: absolute;
        cursor: zoom-in;
        object-fit: cover;
        transition: filter 0.1s;
        .image-box{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        &:hover {
          filter: brightness(70%);
        }

        .pic_cover {
          width: 100%;
          height: 100%;
          position: relative;
          span {
            width: 28px;
            height: 16px;
            font-size: 12px;
            line-height: 16px;
            color: #fff;
            background: h.$main-color;
            text-align: center;
            position: absolute;
            bottom: 0;
            right: 0;
            border-top-left-radius: 8px;
          }
        }
      }
    }
    @media screen and (min-width: 540px)  and (max-width: 856px) {
      .wave-pic-item {
        width: 1.73rem;
        height: 1.73rem;
        margin-left: 4px;
        margin-top: 4px;
        overflow: hidden;
        display: inline-block;
        position: relative;
        .wave-pic-datail {
          width: 100%;
          height: 100%;
          border-radius: 10px;
          overflow: hidden;
          display: block;
          position: absolute;
          cursor: zoom-in;
          object-fit: cover;
           .image-box{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
          transition: filter 0.1s;
          &:hover {
            filter: brightness(70%);
          }

          .pic_cover {
            width: 100%;
            height: 100%;
            position: relative;
            span {
              width: 28px;
              height: 16px;
              font-size: 12px;
              line-height: 16px;
              color: #fff;
              background: h.$main-color;
              text-align: center;
              position: absolute;
              bottom: 0;
              right: 0;
              border-top-left-radius: 8px;
            }
          }
        }
      }
    }
     @media screen  and (max-width: 540px) {
      .wave-pic-item {
        width: 2.6rem;
        height: 2.6rem;
        margin-left: 4px;
        margin-top: 4px;
        overflow: hidden;
        display: inline-block;
        position: relative;
        .wave-pic-datail {
          width: 100%;
          height: 100%;
          border-radius: 10px;
          overflow: hidden;
          display: block;
          position: absolute;
          cursor: zoom-in;
          object-fit: cover;
          transition: filter 0.1s;
           .image-box{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
          &:hover {
            filter: brightness(70%);
          }

          .pic_cover {
            width: 100%;
            height: 100%;
            position: relative;
            span {
              width: 28px;
              height: 16px;
              font-size: 12px;
              line-height: 16px;
              color: #fff;
              background: h.$main-color;
              text-align: center;
              position: absolute;
              bottom: 0;
              right: 0;
              border-top-left-radius: 8px;
            }
          }
        }
      }
    }
  }
}
</style>
